<template>
    <div id="register" class="loginRegister">
        <div class="register_content">
            <form id="registerForm">
                <div class="tab_switch loginRegister_frame">
                    <div class="tab_switch_btn register_tab">
                        <span class="phone_register_btn">手机号注册</span>
                        <span class="email_register_btn">邮箱注册</span>
                    </div>
                    <div class="tab_switch_txt">
                        <div class="tab_switch_list">
                            <div class="input_list">
                                <i class="iconfont icon-shoujihao"></i>
                                <input type="text" name="phoneTxt" placeholder="手机号" />
                            </div>
                        </div>
                        <div class="tab_switch_list">
                            <div class="input_list">
                                <i class="iconfont icon-youxiang"></i>
                                <input type="text" name="emailTxt" placeholder="邮箱" />
                            </div>
                        </div>
                        <div class="input_list">
                            <i class="iconfont icon-yanzhengma"></i>
                            <input type="text" name="codeTxt" placeholder="验证码" />
                            <a href="javascript:;" class="get_code" @click="getCode($event)">获取验证码</a>
                        </div>
                    </div>                    
                </div>
                <div class="loginRegister_btn">
                    <button type="button" v-show="!isLoading" class="submit_btn" @click="submitForm('#registerForm')">下一步</button>
                    <button type="button" v-show="isLoading" class="submit_btn">下一步</button>
                </div>
            </form>
            <div class="register_way">
                <p class="register_line"><router-link :to="{path:'/login'}" class="line">已有账号，立即登录</router-link></p>
            </div>
            <div class="register_protocol">
                点击“下一步”表示同意<router-link :to="{path:'/login'}" class="line">《凤梨共融协议》</router-link>
            </div>
        </div>
        <div class="error_warning">
            <span class="error_txt">
                账号不能为空
            </span>
        </div> 
        <div class="loading-toast" v-show="isLoading"><i class="iconfont icon-jiazai"></i><br/>加载中</div>    
    </div>
</template>

<script>
export default {
    name: 'login',
    data() {
        return {
            "isVisible": false,   //密码不可见
            "isLoading": false,
            "isFlag": true, //定时器开关
        }
    },
    created() {
	  
    },
    mounted() {
        this.tabSwitch('.tab_switch');
    },
    methods: {
        //密码是否可见
        isPasswordVisible(event) {
            var el = event.currentTarget;
            if(this.isVisible) {
                $(el).removeClass('icon-xianshimima').addClass('icon-yincangmima').prev('.passwordTxt').attr('type','password');                
            }else {
                $(el).removeClass('icon-yincangmima').addClass('icon-xianshimima').prev('.passwordTxt').attr('type','text'); 
            }
            this.isVisible = !this.isVisible;
        },
        //提交form
        submitForm(obj) {
            var that = this;
            if(!this.accountFn(obj)) {
                return false;
            }
            var $code = $(obj).find('input[name="codeTxt"]'),
                codeTxt = $.trim($code.val());
            if(codeTxt == '') {               
                this.utils.errorWarning('验证码不能为空');
                return false;
            }           
            that.$router.push({ name: 'setPassword', query: { account: accountTxt }})  
        },
        //提取手机号或邮箱验证
        accountFn(obj){
            var $account = $(obj).find('.tab_switch_list.active').find('input'),
                accountTxt = $.trim($account.val());
            if(accountTxt == '') {
                this.utils.errorWarning($account.attr('placeholder') + '不能为空');
                return false;
            }
            var phoneReg = this.utils.phoneReg,  //手机号正则
                emailReg = this.utils.emailReg;  //邮箱正则
            if($account.attr('name') == 'phoneTxt' && !phoneReg.test(accountTxt)) {
                this.utils.errorWarning('请输入正确的手机号');
                return false;
            }
            if($account.attr('name') == 'emailTxt' && !emailReg.test(accountTxt)) {
                this.utils.errorWarning('请输入正确的邮箱');
                return false;
            }
            return accountTxt;
        },
        //获取验证码
        getCode(event) {
            if(!this.accountFn('#registerForm')) {
                return false;
            }
            var accountTxt = this.accountFn('#registerForm');
            if(!this.isFlag) {
                return;
            }
            this.isFlag = false;
            var el = event.currentTarget,
                second = 59,
                that = this;
            $(el).html('重新获取（59s）');
            var timer = setInterval(function(){
                if(second == 1) {
                    clearInterval(timer);
                    that.isFlag = true;
                    $(el).html('获取验证码');
                }else {
                    second--;
                    $(el).html('重新获取（'+second+'s）');
                }                
            }, 1000);
            this.isLoading = true;
            $.ajax({
                url: "http://127.0.0.1:8081/flgr/services/login/sendNotifyCode",
                type: 'post',
                data: {
                    "loginName": accountTxt,
                    "postType": 0  //0代表注册
                },
                success: function(data) {
                    that.isLoading = false;
                    if(!data || !data.PortResponse) {
                        return false;
                    }
                    var data = data.PortResponse;
                    if(data && data.code == "ERROR") {
                        that.utils.errorWarning(data.msg);
                        return false;
                    }
                    if(data && data.code == "SUCCESS") {
                       
                    }
                    
                },
                error: function(data) {
                    that.isLoading = false;
                    that.utils.errorWarning('获取验证码失败');
                    return false;
                    console.log(data)
                }
            }) 
        },
        //tab选项卡切换
        tabSwitch(obj) {
            var $btn = $(obj).find('.tab_switch_btn'),
                $txt = $(obj).find('.tab_switch_txt'),
                $btnList = $btn.find('span'),
                $txtList = $txt.find('.tab_switch_list'); 
            $btnList.eq(0).addClass('active');
            $txtList.eq(0).addClass('active');
            $.each($btnList, function (index, el) {
                $(el).click(function(){
                    if($(el).hasClass('active')){
                        return ;
                    }
                    $(el).addClass('active').siblings('span').removeClass('active');
                    $txtList.eq(index).addClass('active').siblings('.tab_switch_list').removeClass('active');
                })
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.register_content {
    padding-top: 6.666667rem;
}
.loginRegister_frame {
    background: #fff;
    margin: 0 .4rem .533333rem;
    border-radius: .213333rem;
    padding: 0 1.013333rem .533333rem;
    .input_list {
        display: flex;
        padding:.4rem 0;
        border-bottom: 1px solid #ddd;
        .get_code {
            background: #EDEDED;
            border-radius: 4px;
            white-space: nowrap;
            padding: .213333rem .32rem;
            position: absolute;
            right: 0;
            top: .293333rem;
            line-height: 19px;
            color: #414568;
            &:hover, &:visited {
                text-decoration: none;
            }
        }
    }
    .register_tab {
        display: flex;
        justify-content: space-around;
        line-height: 19px;
        span {
            padding: 17px 5px .453333rem;
            &.active {
                border-bottom: 2px solid #414568;
            }
        }

    }
    .tab_switch_list {
        display: none;
        &.active {
            display: block;
        }
    }
}
.register_way {
    padding: 0 .666667rem;
    margin-top: 1.866667rem;
    .register_line {
        border-bottom: 2px solid #D9DAE1;
        text-align: center;
        height: 14px;
        margin: .8rem .533333rem;
        span, a {
            padding: 0 .4rem;
            background: #414568;
            color: #D9DAE1;
            font-size: .373333rem;
            line-height: 26px;
            // margin-top: -20px;
            display: inline-block;
            &a {
                text-decoration: underline;
            }
        }
    }
    .register_several_way {
        .iconfont {
            width: 1.333333rem;
            height: 1.333333rem;
            text-align: center;
            line-height: 1.333333rem;
            border-radius: 100%;
            font-size: 1.013333rem;
            color: #fff;
            &.icon-zhifubao {
                background: #0D9FE8;
            }
            &.icon-weixin {
                background: #99DE63;
            }
        }              
    }
}
.register_protocol {
    color: #D9DAE1;
    position: absolute;
    width: 100%;
    bottom: .533333rem;
    text-align: center;
    left: 0;
    a {
        color: #3AA8E0;
    }
}

</style>
